/**
*  400电话 模块 - 组件
*/
<template>
  <div class="h-tel">
    <div class="h-banner mb20">
      <img src="@/assets/img/400.jpg" />
    </div>
    
    <div class="h-model-title">
      <h3>400 电话</h3>
      <p>TELEPHONE</p>
    </div>
    
    <section class="h-tips">
      <P>我们提供专业的客户服务，欢迎随时咨询，我们将竭诚为您服务，祝您生活愉快！</p>
      <P>周一至周六每天9:00——18:00(节假日除外)</p>
      <P>欢迎您来电咨询</P>
    </section>
    
    <p class="h-telephone">
      <i class="iconfont iconkefudianhua"></i>400-116-8558
    </p>
    
  </div>
</template>
<script>
import { footerList } from '@/mock' // 脚部数据
import { footerData } from '@/api'

export default {
  name: 'Telephone',
  props: {},
  data () {
    return {
      footerData: [],
    }
  },
  created () {
    // this.getFooterData() // 底部数据加载
  },
  mounted () {
    this.footerData = footerList.result // 使用接口时 此处删除
  },
  methods: {
    getFooterData () {
      const params = { // 请求参数 --- 根据情况 是否需要
        id: '111'
      }
      footerData(params).then(res => {
        this.footerData = res
      })
    }
  }
}
</script>

<style lang="scss" scoped>
  .h-tel {
  }
  .h-banner{
    height: 400px;
    img{
      width: 100%;
      height: 100%;
    }
  }
  .h-tips{
    margin: 30px 0;
    text-align: center;
    color: #666;
  }
  .h-telephone{
    width: 250px;
    height: 55px;
    margin: 20px auto;
    line-height: 55px;
    text-align: center;
    font-size: 24px;
    border: 1px solid #333;
    i{
      margin-right: 20px;
      font-size: 24px;
      color: #333;
    }
  }
</style>
